---
title: Groups of lists
description: A guide to use Fluid DnD with group of lists.
---

import ListGroup from "@/components/svelte/ListGroup.svelte";
import ListGroups from "@/components/svelte/ListGroups.svelte";

import { Code } from "@astrojs/starlight/components";

### List of number example

With **Fluid DnD** you can drag and drop element between two or more list.\
We'll define two list and pass to `droppableGroup` parameter the same group name:

export const highlightsListOfNumbers = ["droppableGroup", "group1"];

export const listOfNumbers = `<script lang="ts">
...
const list1 = $state([1, 2, 3, 4]);
const [ parent1 ] = useDragAndDrop(list1, {
  droppableGroup: "group1",
});
...
const list2 = $state([5, 6, 7, 8]);
const [ parent2 ] = useDragAndDrop(list2, {
  droppableGroup: "group1",
  direction: "horizontal",
});
</script>`;

<Code code={listOfNumbers} lang="svelte" mark={highlightsListOfNumbers} />

### Creating the view

After, we'll create the two lists on the view:

export const listOfNumbersDraggable = `
<div class="group-list">
  <ul ref="parent1" class="number-list">
    {#each list as  element, index (element)}
      <li class="number" data-index={index}>
        { element }
      </li>
    {/each}
  </ul>
  <div ref="parent2" class="number-list-h">
    {#each list2 as  element, index (element)}
      <li class="number" data-index={index}>
        { element }
      </li>
    {/each}
  </div>
</div>
<style>
 ...
</style>
`;

export const highlightsDraggable = ["parent1", "parent2"];

<Code code={listOfNumbersDraggable} lang="svelte" mark={highlightsDraggable} />

### Preview

<div class="pl-8">
  <ListGroup client:load />
</div>

## More than one group

A list can belong to more than one group. So, you can only drag and drop element from one list to another
if the groups to which the list belongs are found in the other.

Example: If the list **A** belongs to **G1** group and the list **B** belongs to **G1** and **G2** groups.
You can only drag elements from the list **A** to **B** not the other way around.

### Example

We'll change the early code adding another group:

export const highlightsListOfNumbersGroups = ["group2"];

export const listOfNumbersGroups = `<script lang="ts">
...
const list1 = $state([1, 2, 3, 4]);
const [ parent1 ] = useDragAndDrop(list1, {
  droppableGroup: "group1",
});
...
const list2 = $state([5, 6, 7, 8]);
const [ parent2 ] = useDragAndDrop(list2, {
  droppableGroup: "group1 group2",
  direction: "horizontal",
});
</script>`;

<Code
  code={listOfNumbersGroups}
  lang="vue"
  mark={highlightsListOfNumbersGroups}
/>

### Preview

<div class="pl-8">
  <ListGroups client:load />
</div>
